import { Button, Card, Form, Input, message } from "antd"
import { LockOutlined, UserOutlined } from "@ant-design/icons"

const Login = () => {
  const onFinish = (values: any) => {
    message.success("登录成功")
  }
  return (
    <div className="flex justify-center items-center mx-0 my-auto h-screen">
      <Card hoverable className="w-96">
        <h1 className="text-center mb-2 text-2xl">登录</h1>
        <Form name="login" onFinish={onFinish}>
          <Form.Item
            name="username"
            rules={[{ required: true, message: "用户名不能为空" }]}
          >
            <Input prefix={<UserOutlined />} placeholder="Username" />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: "密码不能为空" }]}
          >
            <Input
              prefix={<LockOutlined />}
              type="password"
              placeholder="Password"
            />
          </Form.Item>

          <Form.Item>
            <Button block type="primary" htmlType="submit">
              登录
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}
export default Login
